<template>
  <div class="register_container">
    <div class="register_box">
      <el-form
        ref="register_form_ref"
        class="register_form"
        :model="register_form"
        :rules="register_form_rules"
      >
        <!--页头-->
        <el-form-item prop="user">
          <span class="label">Register</span>
        </el-form-item>
        <!--用户名-->
        <el-form-item prop="user">
          <el-input
            prefix-icon="el-icon-user"
            v-model="register_form.username"
            placeholder="username"
          ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="register_form.password"
            placeholder="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="password2">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="register_form.password2"
            placeholder="password"
            show-password
          ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="mail">
          <el-input prefix-icon="el-icon-message" v-model="register_form.mail" placeholder="mail"></el-input>
        </el-form-item>
        <!--机构-->
        <el-form-item prop="mail">
          <el-input
            prefix-icon="el-icon-place"
            v-model="register_form.institution"
            placeholder="institution"
          ></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item prop="buttons">
          <el-button type="primary" @click="regist">注册</el-button>
          <el-button type="primary" @click="tologin">已有账号</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var valiInput = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value !== this.register_form.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      register_form: {
        username: "",
        password: "",
        password2: "",
        mail: "",
        institution: ""
      },
      register_form_rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "请输入正确账号,1-10位数字",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 20, message: "请输入正确密码,1-20位", trigger: "blur" }
        ],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "请输入正确密码,1-20位",
            trigger: "blur"
          },
          { validator: valiInput, trigger: "blur" }
        ],
        mail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 1, max: 20, message: "请输入正确邮箱", trigger: "blur" }
        ],
        institution: [
          { required: true, message: "请输入机构", trigger: "blur" },
          { min: 1, max: 20, message: "请输入正确密码,1-20位", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    tologin() {
      this.$router.push("/login");
    },
    reset() {
      this.$refs.register_form_ref.resetFields();
    },
    regist() {
      this.$axios.post("register", this.register_form).then(res => {
        if (res.data.type === "success") {
          console.log(res.data)
          alert("这是您的私钥，请妥善保存："+res.data.content)
        } else {
          this.$message.error(res.data.content);
        }
      });
    }
  }
};
</script>
<style scoped>
.register_container {
  background-color: #fff;
  height: 100%;
}

.register_box {
  width: 450px;
  height: 450px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 3px rgb(221, 221, 221);
}
.label {
  text-align: center;
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: rgb(105, 105, 105);
}
.buttons {
  display: flex;
  justify-content: flex-end;
}

.register_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}
</style>